export default function UserProfile() {
  // 1、. 定义两个变量
  const userName = "Admin";
  const role = "Manager";

  return (
    <div style={{ padding: "50px", fontFamily: "sans-serif" }}>
      {/* 显示名称 */}
      <h1>{userName}</h1>
      {/* 显示角色 */}
      <span>Role: {role}</span>
      {/* 挑战的逻辑 
        如果是 role 等于 manager ，则渲染后面的 span。
      */}
      {role === "Manager" ? (
        <p style={{ color: "red", fontWeight: "bold" }}>
          ⚠️ 警告: 该用户拥有最高权限
        </p>
      ) : (
        <span>普通用户</span>
      )}
    </div>
  );
}
